const news = Vue.extend({
  template: `<div>
    <el-button
          size="mini">新增</el-button>
          <el-button
          size="mini">查询</el-button>
<el-table
      :data="tableData"
      v-if="tableData.length > 0"
      :row-class-name="tableRowClassName"
      style="width: 100%">
      <el-table-column
        prop="news_name"
        label="新闻名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="news_time"
        label="时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="news_src"
        label="地址"
        width="180">
      </el-table-column>
      <el-table-column
        label="简介"
        width="180">
        <template slot-scope="scope">
        <div v-domText="scope.row.news_content"></div>
      </template>
      </el-table-column>
      <el-table-column
        prop="news_picurl"
        label="新闻照片"
        width="180">
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini" @click="update(scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div>
    <div class="block">
    <span class="demonstration">调整每页显示条数</span>
    <el-pagination
    v-if="search.total>0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="sizes, prev, pager, next"
      :total="search.total">
    </el-pagination>
  </div>
    </div>
    <cDialog v-model="visible">
    <el-form :model="form">
    <el-form-item label="新闻名称" :label-width="formLabelWidth">
      <el-input v-model="form.news_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="时间" :label-width="formLabelWidth">
      <el-input v-model="form.news_time" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" :label-width="formLabelWidth">
      <el-input v-model="form.news_src" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="简介" :label-width="formLabelWidth">
      <el-input v-model="form.news_content" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="新闻照片" :label-width="formLabelWidth">
      <el-input v-model="form.news_picurl" autocomplete="off"></el-input>
    </el-form-item>
    </el-form></cDialog>
</div>`,
  data() {
    return {
      tableData: [],
      visible: false,
      form: {
        news_name: "每次一看它，我就开心的像儿童",
        news_time: "2021-06-25 15:37:50",
        news_src: "童话世界",
        news_content:
          "<p>梦想是一个天真的词，实现梦想是一个残酷的词。</p>\r\n\r\n<p>人的眼睛为什么要长在前面，是为了要向前看。</p>\r\n\r\n<p>战争就是这样，双方都认为自己是好的一方。</p>\r\n\r\n<p>今后还会不断地栽跟头，但同时你也有了每次站起来的坚强。</p>\r\n\r\n<p>全部都依赖别人的话永远都不能成为独当一面的人，所谓选择道路，并不一定要选择好走又安全的道路。有什么不好，就算迟了也要努力到最后。</p>\r\n",
        news_picurl: "foot.jpg",
      },
      search: {
        page: 1,
        size: 5,
        total: 0,
      },
      formLabelWidth: "120px",
      currentPage2: 1,
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    getUserList() {
      http({
        url: "/news/getList",
        method: "get",
        params: {
          page: this.search.page,
          size: this.search.size,
        },
      }).then((res) => {
        this.tableData = res.data;
        this.search.total = res.total;
      });
    },
    update(row) {
      this.form = row;
      this.visible = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.search.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.search.page = val;
      this.getUserList();
    },
  },
  components: {
    cDialog: dialog,
  },
  created() {
    this.getUserList();
  },
  directives: {
    domText: {
      bind: function (el, bind, vnode) {
        let HTMLDecode = function (text) {
          var temp = document.createElement("div");
          temp.innerHTML = text;
          var output = temp.innerText || temp.textContent;
          temp = null;
          return output;
        };
        console.log(HTMLDecode(bind.value));
        el.innerHTML = HTMLDecode(bind.value);
      },
    },
  },
});
